<template>
  <div class="guide-line">
    <div
      class="guide-line__line"
      :style="backgroundStyles"
    />
  </div>
</template>
<script>
export default {
  name: 'GuideLine',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {
    options: {
      get() {
        return this.value
      },
      set(v) {
        this.value = v
      }
    },
    styles: {
      get() {
        if (this.options && this.options.styles) {
          return this.options.styles
        }
        return null
      },
      set(v) {
        this.options.styles = v
      }
    },
    backgroundStyles() {
      if (this.styles && this.styles.background) {
        return {
          background: this.styles.background
        }
      }
      return null
    }
  }
}
</script>

<style lang="scss" scoped>
.guide-line {
  padding: 0 15px;
  height: 20px;
  display: flex;
  align-items: center;
  &__line {
    width: 100%;
    height: 1px;
    background: #f2f4f7;
  }
}
</style>
